{include "INC_header.html" title="配置"}
<div id="app-outlet" class="padding">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="configs.locale" :theme="configs.theme">
        <div class="ui message info"><i class="fa fa-info-circle"></i> 缓存打开后，数据调用会缓存到磁盘，二次访问时，优先读取磁盘缓存，加快响应！</div>
        <!-- 系统配置 -->
        <div class="ui form padding-top">
            <div class="field">
                <div class="label">是否打开缓存</div>
                <a-radio-group v-model:value="config.cache">
                    <a-radio :value="true">打开</a-radio>
                    <a-radio :value="false">关闭</a-radio>
                </a-radio-group>
            </div>
            <div class="field">
                <div class="label">缓存有效时长</div>
                <a-input style="width: 200px;" v-model:value="config.cacheTime" placeholder="纯数字" suffix="秒"></a-input>
            </div>
            <div class="field">
                <div class="label">非法字符过滤(多个用逗号分隔)</div>
                <a-textarea style="width: 700px;" rows="10" v-model:value="config.illegalString" placeholder="如：操你妈，嫖娼，约炮"></a-textarea>
            </div>
            <div class="field">
                <a-button size="large" type="primary" :loadnig="saveLoading" @click="save">保存</a-button>
            </div>
        </div>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp } = Vue;
    const { message } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                configs: appProviderConfig,
                //数据
                config: {
                    cache: false,
                    cacheTime: 86400,
                    illegalString: ''
                },
                php: 'php',
                name: 'admin',
                saveLoading: false
            }
        },
        mounted() {
            //挂载成功
            const hide = message.loading("正在加载配置...");
            let self = this;
            axios.get("{url url='/cms/api/config'}").then(({ data }) => {
                hide();
                if (data.error === 0) {
                    self.config = data.data;
                } else {
                    message.error(data.message);
                }
            }).catch(() => {
                hide();
                message.error("服务端繁忙");
            });
        },
        methods: {
            //方法
            save: function () {
                if (this.saveLoading) {
                    return;
                }
                this.saveLoading = true;
                let self = this;
                axios.post("{url url='/cms/api/config/save'}", {
                    //原文提交过去
                    config: this.config
                }).then(({ data }) => {
                    self.saveLoading = false;
                    if (data.error === 0) {
                        message.success(data.message);
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    self.saveLoading = false;
                    message.error("服务端繁忙");
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}